<template>
    <div id="home">
      <!-- 本页面是课程概览页的布局，概览的具体设置查看Info.vue页面 -->
      <topBar
        :isNotLogIn="isNotLogIn"
        :isManager="isManager"
        :userName="userName"
      ></topBar>
      <img src="@/assets/image/background.svg" width="100%" height="100%" />
      <el-container id="mainContainer">

        <el-aside width="200px" >
          <el-menu @select="menuClick"
            background-color="#B3C0D1"
            router="true"
          >
            <el-menu-item index="/vis/visHome">
                <i class="el-icon-s-home"></i>
                <span slot="title">监测首页</span>
            </el-menu-item>
            <el-menu-item index="/vis/email">
                <i class="el-icon-message"></i>
                <span slot="title">邮件监测</span>
            </el-menu-item>
            <el-menu-item index="/vis/check"
              >                <i class="el-icon-s-custom"></i>
                <span slot="title">打卡监测</span>
              </el-menu-item>
          
          <el-menu-item index="/vis/log">
            <i class="el-icon-data-line"></i>
                <span slot="title">流量监测</span>
            </el-menu-item>
            <el-menu-item index="/vis/other">
                <i class="el-icon-s-opportunity"></i>
                <span slot="title">登录监测</span>
            </el-menu-item>
            <el-menu-item index="/vis/person/1456">
                <i class="el-icon-s-custom"></i>
                <span slot="title">个人监测</span>
            </el-menu-item>
            <!-- <el-menu-item index="/vis/person">
                <i class="el-icon-s-opportunity"></i>
                <span slot="title">人员信息</span>
            </el-menu-item> -->
        </el-menu>
        </el-aside>

        <el-main>
          <div>
            <router-view></router-view>
          </div>
        </el-main>
      </el-container>
      <!-- <bottomBar></bottomBar> -->
    </div>
  </template>
  <script>
  import topBar from "@/components/common/topBar";
  // import bottomBar from '@/components/common/bottomBar'
  export default {
    components: {
      topBar,
      // bottomBar
    },
    data() {
      return {
        isNotLogIn: true,
        // isNotLogIn: false,
        userName: "",
        isManager: true,
      };
    },
    created() {
      this.getParams();
    },
    watch: {
      "$route.path": "getParams",
    },
    mounted () {
    this.menuClick('/vis/visHome')
  },
    methods: {
        menuClick(index) {
      this.$router.push(index)
    },
      // 接收用户名和登录状态
      getParams() {
        const res = JSON.parse(window.sessionStorage.getItem("user"));
        if (res === null) return;
        this.userName = res.userName;
        this.isNotLogIn = false;
        this.isManager = res.isManager;
      },
    },
  };
  </script>
  <style>
  .header .userInfo {
    cursor: pointer;
  }
  .homeWelcome {
    text-align: center;
    font-size: 30px;
    padding-top: 50px;
  }
  #home {
    height: 100%;
    width: 100%;
  }
  #mainContainer {
    position: absolute;
    top: 50px;
    height: calc(100% - 50px);
    width: 100%;
  }
  .el-aside {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 200px;
  }
  </style>
  